<template>
    <v-navigation-drawer permanent>
        <v-list
            :lines="false"
            nav
        >
            <v-list-item
                v-for="(item, i) in items"
                :key="i"
                :value="item"
                @click="use = item.to"
            >
                <template v-slot:prepend>
                    <v-icon :icon="item.icon"></v-icon>
                </template>
                <v-list-item-title
                    v-text="item.text"
                ></v-list-item-title>
            </v-list-item>
        </v-list>
    </v-navigation-drawer>
    <v-main class="mt-16 py-16" style="margin-left: 192px; min-height: 300px">
        <component :is="install_list[use]"></component>
    </v-main>
</template>
<script setup allowJs>
import { ref } from 'vue'
import MyProfile from './components/MyProfile.vue'
const use = ref('MyProfile')
const install_list = {
    MyProfile: MyProfile
}
const items = [
    { text: 'My Profile', icon: 'mdi-badge-account-outline', to: 'MyProfile' },
]
</script>
